<template>
  <view class="flex-col container">
    <navbar title="个性化选项"></navbar>
    <view class="flex-row content align-center justify-between">
      <text>开启个性化推荐</text>
      <image v-if="isOpen" src="@/static/switch_on.png" class="switch" @click="onSwitch"/>
      <image v-else src="@/static/switch_off.png" class="switch" @click="onSwitch"/>
    </view>
    <text class="desc">关闭后，将不会使用你的偏好特征进行内容推荐，你可能会看到不感兴趣的内容</text>
  </view>
</template>
<script>
import navbar from '@/components/navbar'

export default {
  components: {navbar},
  data() {
    return {
      isOpen: false,
    }
  },
  onLoad() {
    this.isOpen = !!uni.getStorageSync('personalization')
  },
  methods: {
    onSwitch() {
      this.isOpen = !this.isOpen
      uni.setStorageSync('personalization', this.isOpen)
    },
  }
}
</script>
<style lang="scss" scoped>
.container {
  .content {
    padding: 0 20upx;
    margin-top: 30upx;
    margin-left: 30upx;
    margin-right: 40upx;
    height: 120upx;
    background-color: #ffffff;
    border-radius: 20upx;
    font-family: PingFangSC-Regular;
    font-size: 32upx;
    color: #111111;
    font-weight: bold;

    .switch {
      width: 128upx;
      height: 70upx;
    }
  }

  .desc {
    margin: 30upx;
    font-family: PingFangSC-Regular;
    font-size: 32upx;
    color: #8B8888;
    font-weight: 400;
  }
}
</style>
